<template>
  <div class="min">
    <div class="change">
      <el-radio-group v-model="radio" size="medium">
        <el-radio-button label="本周" data-type="week" />
        <el-radio-button label="本月" data-type="month" />
        <el-radio-button label="本年" data-type="year" />
      </el-radio-group>
    </div>
    <div ref="echarts" style="width: 100%;height: 480px;margin-top: -40px;" />
  </div>
</template>

<script>
// /* eslint-disable */
import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {
      radio: '本周'
    }
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      const myCharts = echarts.init(this.$refs.echarts)
      const data = {
        week: [
          [200, 400, 600, 300, 100],
          [100, 433, 134, 168, 256]
        ],
        month: [
          [600, 300, 233, 54, 344, 566, 333],
          [600, 300, 233, 54, 344, 566, 333]
        ],
        year: [
          [222, 333, 346, 543, 789, 345],
          [222, 333, 346, 543, 789, 345]
        ]
      }
      //   console.log(myCharts)
      const option = {
        // 图例
        tooltip: {
          trigger: 'axis'
        },
        // X轴
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            show: true, // 是否显示轴线
            lineStyle: {
              color: 'fff' // 刻度线的颜色
            }
          }
        },
        // 边距
        grid: {
          left: 50,
          right: 30
        },
        // 图例位置
        legend: {
          bottom: '2%',
          left: 'center'
        },
        yAxis: {
          type: 'value',
          splitLine: { // 网格线
            lineStyle: {
              type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
            },
            show: true // 隐藏或显示
          }
        },
        // 图标颜色
        color: ['#e8782f', '#f0b43e'],
        series: [
          {
            name: '入库',
            data: data.week[0],
            type: 'bar',
            barGap: 0
          },
          {
            name: '出库',
            data: data.week[1],
            type: 'bar'
          }
        ]
      }
      myCharts.setOption(option)
      window.addEventListener('resize', myCharts.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.min{
    position: relative;
}
.change{
    display: flex;
    position: absolute;
    right: 20px;
    top: 15px;
    border-radius: 4px ;
    z-index: 99;

}
.el-button{
  width: 70px;
  height: 36px;
  margin-right: 0;

}

</style>>

